<link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/layui/css/layui.css')}" media="all">
<script th:src="${@mvcResourceUrlProvider.getForLookupPath('/layui/layui.js')}"></script>

<script th:src="${@mvcResourceUrlProvider.getForLookupPath('/ep/js/common/common.js')}"></script>
<style>
    #ep-user-info .layui-input-block {
        margin-left: 110px;
        margin-right: 20px;
    }

    #ep-user-info .layui-form-label {
        width: 100px;
        padding: 0px;
    }

    #ep-user-info .ep-form-item-require:after {
        display: inline-block;
        margin-left: 10px;
        content: "*";
        line-height: 1;
        font-size: 20px;
        color: #f5222d
    }

    #ep-user-info .ep-form-item-no-require:after {
        display: inline-block;
        margin-left: 10px;
        content: "*";
        line-height: 1;
        font-size: 20px;
        color: #fafafa;
    }
</style>
<div id="ep-user-info" lay-title="用户个人信息">
    <div id="user-img" style="text-align: center;">
        <img style="border-radius: 50px" width="100px" alt="头像" title="点我更换头像" data-th-src="${user.avatar}">
        <div style="color: #aaa;font-size: 12px;text-align: center;margin: 0 0 10px 0">↑ 点击图片更换头像</div>
    </div>
    <div class=layui-form style="margin-top: 20px" lay-filter="user-update-form">
        <div class="layui-form-item">
            <label class="layui-form-label ep-form-item-require">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="userId" data-th-value="${user.userId}" class="layui-input hidden">
                <input type="text" name="username" autocomplete="off" class="layui-input" readonly
                       data-th-value="${user.username}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ep-form-item-require">真实姓名</label>
            <div class="layui-input-block">
                <input style="color: #0C0C0C" type="text" lay-verify="required" name="realName" autocomplete="off" class="layui-input"
                       data-th-value="${user.realName}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ep-form-item-require">联系方式</label>
            <div class="layui-input-block">
                <input style="color: #0C0C0C" type="text" lay-verify="required|phone" name="mobile" autocomplete="off" class="layui-input"
                       data-th-value="${user.mobile}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ep-form-item-require">宿舍楼</label>
            <div class="layui-input-block">
                <input style="color: #0C0C0C" type="text" lay-verify="required" placeholder="用于将回报送到您的寝室楼" name="address" autocomplete="off"
                       class="layui-input"
                       data-th-value="${user.address}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ep-form-item-require">邮箱</label>
            <div class="layui-input-block">
                <input style="color: #0C0C0C" type="text" name="email" lay-verify="required|email" autocomplete="off" class="layui-input"
                       data-th-value="${user.email}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ep-form-item-require">班级</label>
            <div class="layui-input-block" id="user-update-dept"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ep-form-item-no-require">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="男性">
                <input type="radio" name="sex" value="1" title="女性">
                <input type="radio" name="sex" value="2" title="保密">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="submit" class="layui-btn hidden" lay-submit lay-filter="user-update-form-sub">立即提交</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.config({
        dir: '/layui/'
    }).extend({
        xmSelect: '/ep/lay/extends/xm-select'
    });
    layui.use(['jquery', 'form', 'upload', 'layedit','xmSelect'], function () {
        let $ = layui.jquery,
            form = layui.form,
            xmSelect = layui.xmSelect,
            $view = $("#ep-user-info"),deptXmlSelect,selectFlag=false;
        let sex = [[${sex}]];
        let deptId = [[${deptId}]];
        if (deptId!=null && deptId!=""){
            selectFlag = true;
        }
        initUserValue();
        deptXmlSelect = xmSelect.render({
            el: '#user-update-dept',
            model: {label: {type: 'text'}},
            tree: {
                show: true,
                strict: false,
                showLine: false,
                clickCheck: true,
                expandedKeys: [-1],
            },
            name: 'deptId',
            theme: {
                color: '#52c41a',
            },
            prop: {
                value: 'id'
            },
            height: 'auto',
            on: function (data) {
                console.log(data.change[0])
                if (data.change[0].hasChild){
                    layer.msg("请选择具体的班级")
                    selectFlag = false;
                }else{
                    selectFlag = true;
                }
                if (data.isAdd) {
                    return data.change.slice(0, 1)
                }
            }
        });
        $.get('/dept/select/tree', null, function (data) {
            deptXmlSelect.update(data)
            deptXmlSelect.setValue([deptId]);
        });
        function initUserValue() {
            $view.find("input[name='sex'][value="+sex+"]").attr("checked",true);
            form.render();
        }

        form.on('submit(user-update-form-sub)', function (data) {
            let param = data.field;
            if (!selectFlag){
                layer.msg("请选择具体的班级")
                return false;
            }
            if (selectFlag){
                $.ajax({
                    url: "/user/update/web",
                    type: "post",
                    data: param,
                    success: function (data) {
                        if (data.code == 200) {
                            layer.closeAll();
                            layer.msg("修改成功");
                            window.location.reload();
                        }
                    }
                })
            }
            return false;
        });
        $view.on('click', '#user-img img', function () {
            $.get('/web/user/avatar/update', {}, function (str) {
                layer.open({
                    type: 1
                    , content: str //注意，如果str是object，那么需要字符拼接。
                    , title: ["点击更换", "text-align: center;"]
                    , resize: false
                    , scrollbar: false
                    , area: $(window).width() <= 750 ? '90%' : '650px'
                    , offset: '100px'
                });
            });
        });

    });

</script>